/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Card, Row, Col } from 'antd';
import { getRanString } from '../utils';

interface PorpsType {
  screenSize: boolean;
  //   columns: {
  //     title: string;
  //     dataIndex: string;
  //     render?: any;
  //   }[];
  columns: any; // 可能会是二维数组
  data: object;
  labelSpan?: number;
  contentSpan?: number;
  isDoubleColumns?: boolean;
}

interface ColumnType {
  title: string;
  dataIndex: string;
  render?: any;
}
interface RenderCardPropsType {
  column: ColumnType[];
}

const CommonColumns = (props: PorpsType) => {
  const { screenSize, columns = [], data = {}, labelSpan, contentSpan, isDoubleColumns } = props;
  const RenderCard = (prop: RenderCardPropsType) => {
    const { column } = prop;
    return (
      <>
        <Col span={screenSize ? 24 : 12}>
          {column.map((rows: ColumnType) => (
            <Row key={getRanString()} style={{ marginTop: 5 }}>
              <Col span={labelSpan || 11} offset={1} style={{ textAlign: 'right' }}>
                {rows.title}:
              </Col>
              <Col span={contentSpan || 11} offset={1}>
                {rows.render ? rows.render() : data[rows.dataIndex] || '--'}
              </Col>
            </Row>
          ))}
        </Col>
      </>
    );
  };
  return (
    <Card key={getRanString()} style={{ marginBottom: 20 }}>
      <Row wrap>
        {isDoubleColumns ? (
          columns.map((itemm: ColumnType[]) => <RenderCard column={itemm} key={getRanString()} />)
        ) : (
          <RenderCard column={columns} key={getRanString()} />
        )}
      </Row>
    </Card>
  );
};

export default CommonColumns;
